﻿<!DOCTYPE html>
<html>
<head>
    <title>{$platform.name|default=''}</title>
    <link href="/static/css/framework-font.css" rel="stylesheet"/>
    <script src="/static/js/jquery-2.1.1.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

    <script src="/static/js/jquery.cookie.js"></script>
    <link href="/static/css/framework-theme.css" rel="stylesheet"/>
    <script src="/static/js/framework-ui.js"></script>
    <script src="/static/js/framework-clientdata.js"></script>

    <!--弹框js-->
    <script src="/static/js/yii.js"></script>

    <!--引用layui弹框插件-->
    <script src="/static/layui/layui.all.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link href="/static/layui/css/layui.css" rel="stylesheet"/>
    <script src="/static/layui/lay/modules/layer.js"></script>


    <!--开关主键-->
    <script src="/static/bootstrap/bootstrap-switch.js"></script>
    <link href="/static/bootstrap/bootstrap-switch.css" rel="stylesheet"/>

    <!--    配置select多选相关-->
    <script src="/static/layui/dist/xm-select.js"></script>


    <link href="/static/css/default/public.css" rel="stylesheet"/>
</head>
<body>
<style>
    .modal-dialog{width: 850px!important}
    .layui-table-cell{
        height:50px;
        line-height: 50px;
    }
</style>

<div class="newtest">


    <div class="layui-row searchBigBox" id="searchBox">
        <form class="layui-form layui-col-md12 x-so" name="searchForm">
            <span> 所属小区：</span>
            <div class="layui-inline">
                <select class="layui-input" name="community_id" lay-search="" lay-filter="gettype">
                    <option value="">全部</option>
                    {volist name="community" id="vo"}
                    <option value="{$key}" >{$vo}</option>
                    {/volist}
                </select>
            </div>

            <span> 设备名称：</span>
            <div class="layui-inline">
                <input type="text" class="layui-input" name="deviceName">
            </div>

            <button class="layui-btn serach_btn" type="button" ><i class="layui-icon">&#xe615;</i></button>
            <button class="layui-btn layui-btn-primary" type="reset">重置</button>

        </form>
    </div>



    <div class="new_main">
        <table class="layui-hide" id="demo" lay-filter="demo"></table>
        <script type="text/html" id="barDemo">
            <button class="layui-btn layui-btn-xs"  lay-event="detail">修改</button>
            <button class="layui-btn layui-btn-xs layui-btn-warm"  lay-event="capture">获取截图</button>
            <button class="layui-btn layui-btn-xs layui-btn-primary"  lay-event="monitor">查看监控</button>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="detail" >批量摄像头</button>
                <a class="layui-btn layui-btn-sm layui-btn-normal" href="{:URL('wuye/monitor/info')}">监控列表</a>
            </div>
        </script>
    </div>
</div>
<script type="text/html" id="carImg">
    {{# if(d.img){ }}
    <img src="{{d.img}}" alt="" style="width: 70%;" onclick="previewImg(this)">
    {{# }}}
</script>

</body>
<script src="/static/js/index.js"></script>
<script src="/static/js/indextab.js"></script>
<script src="/static/js/pace.min.js"></script>
<script>
    function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;
        var height = img.height + 50; //获取图片高度
        var width = img.width; //获取图片宽度
        var imgHtml = "<img src='" + obj.src + "' />";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [width + 'px',height+'px'],
            shadeClose:true,//点击外围关闭弹窗
            scrollbar: false,//不现实滚动条
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }

    var modal=new yii.modal();
    layui.use(['form','jquery','layer','laydate','table','upload'], function() { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer,upload = layui.upload;
        var form = layui.form;
        var table = layui.table //表格
        var url = "{:URL('wuye/monitor/index')}";



        //搜索操作
        $('.serach_btn').click(function () {
            var data=$("form[name='searchForm']").serializeArray();
            var dataVal = {};
            $.each(data, function(i, item){
                dataVal[item.name] = item.value;
            });
            var where = dataVal;
            search(table,url,where)
        });

        //列表
        var where = {type:'list'};
        var title = "楼栋列表";
        var cols = [[
            {field: 'id', title: 'ID',  sort: true, fixed: 'left',width:80}
            ,{field: 'propertyName', title: '小区名称',align: "center"}
            ,{field: 'deviceName', title: '通道名称(点击编辑)',align: "center",edit: 'text'}
            ,{field: 'deviceSerial', title: '设备序列号',align: "center"}
            ,{field: 'channelNo', title: '通道号',sort: true,align: "center"}
            // ,{field: 'flvAddress', title: '摄像头地址',align: "center"}
            ,{field: 'img', title: '摄像头截图',align: "center",templet:"#carImg"}
            ,{field: 'addtime', title: '添加时间',sort: true,align: "center"}
            ,{fixed: 'right',title: '操作', width:300, align:'center', toolbar: '#barDemo'}
        ]];
        showlist(table,url,where,title,cols);



        //监听行工具事件
        table.on('tool(demo)', function(obj) {
            var id = obj.data.id;
            switch (obj.event) {
                case 'del':
                    layer.confirm('是否确定操作?', function(index){
                        let url="{:URL('wuye/monitor/del')}";
                        let where = {id:id};
                        publicDel(table,url,where,obj,index,1);
                    });
                    break;
                case 'capture':
                    layer.confirm('是否确定操作?', function(index){
                        let url="{:URL('wuye/monitor/capture')}";
                        let where = {id:id};
                        publicDel(table,url,where,obj,index,1);
                    });
                    break;
                case 'detail':
                    modal.initialization({
                        url: "{:URL('wuye/monitor/detail')}",
                        type: "post",
                        data:{
                            id:id
                        }
                    });
                    break;
                case "monitor":
                    var title = obj.data.deviceName;
                    //示范一个公告层
                    layer.open({
                        type: 2
                        ,title: title
                        ,shade: 0.8
                        ,moveType: 1 //拖拽模式，0或者1
                        ,area: ["1015px", "858px"]
                        ,content: "/wuye/monitor/flv/id/"+id
                    });
                    break;
            }
        });

        table.on('edit(demo)',function (obj) {
            var deviceName = obj.value; //得到修改后的值
            var id = obj.data.id;
            $.ajax({
                type: "post",
                url: "{:URL('wuye/monitor/saveName')}",
                data: {id:id,deviceName:deviceName},
                dataType: "json",
                success: function (res) {
                    if (res.code) {
                        layer.alert(data.msg);
                    }
                }
            });
        })

        //头工具栏事件
        table.on('toolbar(demo)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckLength':
                    var data = checkStatus.data;
                    var id=[];
                    for (var i = 0; i < data.length; i++) {
                        id[i] = data[i].id;
                    }
                    layer.confirm('是否确定操作?', function(index){
                        let url="{:URL('wuye/monitor/del')}";
                        let where = {id:id};
                        publicDel(table,url,where,obj,index,1);
                    });
                    break;
                case 'detail':
                    modal.initialization({
                        url: "{:URL('wuye/monitor/detail')}",
                        type: "post",
                    });
                    break;
            }
        });
    });

</script>

</html>
